<template>
  <div class="edit-wrap">
    <div class="edit-50">
      <div style="border: 1px solid #ccc">
        <Toolbar
          style="border-bottom: 1px solid #ccc"
          :editor="editorRef"
          :defaultConfig="toolbarConfig"
          :mode="mode"
        />
        <Editor
          style="height: 500px; overflow-y: hidden;"
          v-model="valueHtml"
          :defaultConfig="editorConfig"
          :mode="mode"
          @onCreated="handleCreated"
          @customPaste="customPaste"
          @onFocus="handleFocus"
          @onBlur="handleBlur"
        />
      </div>
    </div>
    <div class="edit-50" style="border: 1px solid #ccc;margin-left:10px;">
      <ul class="etag">
        <li v-for="(item, index) in list" :key="index" @click="handleClickTag(item)">{{item.name}}</li>
      </ul>
    </div>
  </div>
</template>

<script lang="ts">
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { defineComponent, onMounted, onBeforeUnmount, ref, shallowRef } from 'vue';
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
export default defineComponent({
  components: {
    Editor,
    Toolbar
  },
  setup() {
    const list = ref([
      {
        name: '登录平台次数(v1)',
        key: 'v1'
      },
      {
        name: '办结率(v2)',
        key: 'v2'
      },
      {
        name: '会议总时长(v3)',
        key: 'v3'
      }
    ]);
    const editorRef = shallowRef()
    // 内容 HTML
    const valueHtml = ref('<p>hello</p>')
    // 模拟 ajax 异步获取内容
    onMounted(() => {
        // setTimeout(() => {
        //     valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>'
        // }, 1500)
    });
    const toolbarConfig = {}
    const editorConfig = { placeholder: '请输入内容...' }
    // 组件销毁时，也及时销毁编辑器
    onBeforeUnmount(() => {
        const editor = editorRef.value
        if (editor == null) return
        editor.destroy()
    })

    const handleCreated = (editor:any) => {
      editorRef.value = editor // 记录 editor 实例，重要！
    }

    const handleClickTag = (row: any) => {
      // console.log(row.name)
      // console.log(editorRef.value)
      // let editdom = editorRef.value;
      // editdom.insertText("光标插入文字");
      // editdom.cmd.do("insertHTML","<span>"+'dddd'+"</span>")
      valueHtml.value = row.name
    }

    const customPaste = (editor:any, event:any, callback:any) => {
      console.log('ClipboardEvent 粘贴事件对象', editor, event)
       // 自定义插入内容
      editor.insertText('xxx')
      event.preventDefault()
      callback(false) // 返回值（注意，vue 
    }

    const handleFocus = (editor: any) => {
      // console.log(editor, '聚焦')
    }

    const handleBlur = (editor: any) => {
      console.log(editor, valueHtml, '失去焦点')
      editor.insertText('xxx')
    }

    return {
      editorRef,
      valueHtml,
      mode: 'default', // 或 'simple'
      toolbarConfig,
      editorConfig,
      handleCreated,
      list,
      handleClickTag,
      customPaste,
      handleFocus,
      handleBlur
    }
  }
})
</script>

<style lang="scss" scoped>
.edit-wrap{
  display: flex;
  .edit-50{
    width: 50%;
  }
  .etag{
    display: flex;
    padding: 20px;
    box-sizing: border-box;
    li{
      padding: 10px;
      border-radius: 5px;
      border: 1px solid #ccc;
      cursor: pointer;
    }
    li+li{
      margin-left: 20px
    }
  }
}
</style>